.wrapper{
  width: 750px;
  position: relative;
  overflow: hidden;
  .bg{
    width: 750px;
    //font-size: 0;
    ////letter-spacing: -2px;
    //display: block;
    //margin: 0;
    //padding: 0;
    //border: 0;
    //height: 11000px;
    overflow-y: scroll;
    img{
      //letter-spacing: -2px;
      //display: block;
      width: 750px;
      height: 1334px;
      //font-size: 0;
      &:nth-child(8){
        height: 1880px;
      }
    }
    .img8{
      height: 1880px;
    }
    //.img9{
    //  height: 546px;
    //}

  }
  .copyright{
    position: absolute;
    top: 11160px;
    width: 750px;
    color: #aaaaaa;
    text-align: center;
  }
}
.json{
  position: absolute;
  top:0;
  left: 0;
  width: 100px;
  height: 100px;
  z-index: 90;
  background: whitesmoke;
}

.light{
  width: 150px;
  height:170px;
  position: fixed;
  left: 30px;
  z-index: 90;
  //top: 400px;
  //animation: deng 2.5s infinite;
}
@-webkit-keyframes deng /* Safari 与 Chrome */
{
  0% {transform: rotate(-50deg);
    transform-origin:90% 10%;}
  //25% {transform: translate(0px, 0px);}
  50% {transform: rotate(0deg);
    transform-origin:90% 10%;}
  //75% {transform: translate(0px, 0px);}
  100% {transform: rotate(-50deg);
    transform-origin:90% 10%;}
}

.palace{
  position: absolute;
  display: block;
  width: 370px;
  height: 300px;
  z-index: 9;
  background: darkgrey;
  //border-radius: 100%;

  // 武英殿
  &:nth-child(4){
    left: 160px;
    top: 2320px;
    display: flex;
    justify-content: space-around;
    //animation: my1 2s infinite;
  }
  //太和殿
  &:nth-child(3){
    right: 0px;
    top: 3060px;
    display: flex;
    justify-content: space-around;
    //animation: my2 2s infinite;
  }
  // 撷芳殿
  &:nth-child(8){
    left: 0px;
    top: 5380px;
    display: flex;
    justify-content: space-around;
    //animation: my1 2s infinite;
  }
  //养心殿
  &:nth-child(5){
    left: 200px;
    top: 6180px;
    display: flex;
    justify-content: space-around;
    //animation: my1 2s infinite;
  }
  //乾清殿
  &:nth-child(6){
    right: 0px;
    top: 7260px;
    display: flex;
    justify-content: space-around;
    //animation: my2 2s infinite;
  }
  // 坤宁宫
  &:nth-child(7){
    left:0px;
    top: 8560px;
    display: flex;
    justify-content: space-around;
    //animation: my1 2s infinite;
  }
}


.enter{
  display: inline-block;
  width: 100px;
  height: 30px;
  background: red;
  & a{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: black;
  }
}


@-webkit-keyframes my1 /* Safari 与 Chrome */
{
  0% {transform: translate(-30px, -20px);}
  //25% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 0px);}
  //75% {transform: translate(0px, 0px);}
  100% {transform: translate(-30px, -20px);}
}
@-webkit-keyframes my2 /* Safari 与 Chrome */
{
  0% {transform: translate(-30px, 30px);}
  //50% {transform: translateY(0);}
  50% {transform: translate(0px, 0px);}
  //0% {transform: translateY(0px);}
  100% {transform: translate(-30px, 30px);}
}

.packet{
  width: 300px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  //transform: translate(-150px,-50px);
  margin: auto;
  background: gainsboro;
  z-index: 999;
}

.messageBox{
  position: fixed;
  //right:0;
  top: 50px;
  left: 30px;
  //width: 500px;
  padding: 0 10px;
  width: 690px;
  overflow: hidden;
  height: 50px;
  border-radius: 25px;
  background: rgba(0,0,0,0.2);
  z-index: 222;

  //transform: translateX(10px);
  span{
    //background-color: #1abc9d!important;
    position: absolute;
    //padding: 10px;
    font-size: 30px;
    line-height: 30px;
    margin-left: 25px;
    top:0;
    width: 100%;
    margin-top: 10px;
    color: whitesmoke;
    font-family: "PingFang SC Light";
    animation: myfirst 3s ;
  }
  i{
    font-size: 24px!important;
    color: #1abc9d;
    position: absolute;
    right: 0;
    top: 10px;
  }
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
  from { transform: translateX(750px)}
  to { transform: translateX(0px)}
}
.quesBox{
  position: fixed;
  top: 0;
  left: 0;
  //width: 750px;
  //height: 1334px;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.2);
  .ques{
    position: absolute;
    top:50%;
    //left:50%;
    //right:0;
    //bottom: 0;
    margin-top: -604px;
    width: 750px;
    height: 1208px;
  }
}

.imgNow{
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  margin: auto;
  //background: rgba(0, 0, 0, 0.3);
  z-index: 111;
  //width: 750px;
  //height: 1334px;
  & img{
    //width: 100%;
    //height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -420px;
    margin-left: -350px;
    //right:0;
    //bottom: 0;
    //margin: auto;
    width: 699px;
    height: 821px;
  }
  & div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 1334px;
    background: rgba(0,0,0,0.5);
    z-index: 100;

  }
}
.titleHead{
  position: absolute;
  left: 0;
  top: 40px;
  width: 750px;
  height: 500px;
  //animation: t1 1.5s;
  animation-name:t1, t2;    /*绑定到选择器的动画名称*/
  animation-duration:1.5s, 5s;                /*完成动画所花费的时间*/
  animation-timing-function:linear, linear; /*动画的速度曲线*/
  animation-delay: 0s, 1.5s;                    /*动画开始之前的延迟*/
  animation-iteration-count:1, infinite;    /*动画应该播放的次数 infinite是无限循环*/
}
@-webkit-keyframes t1 /* Safari 与 Chrome */
{

  0% {transform: translateY(-200px);}

  100% {transform: translateY(0px);}

}
@-webkit-keyframes t2 /* Safari 与 Chrome */
{
  0% {transform: translateY(0px);}
  50% {transform: translateY(5px);}
  100% {transform: translateY(0px);}
}
.bottom{
  position: absolute;
  width: 600px;
  height: 100px;
  left: 70px;
  bottom: 280px;
  display: flex;
  justify-content: space-around;
  & img{
    width: 280px;
    height: 110px;
  }
}


.palace{

}
.jiantou{
  width: 80px;
  height: 80px;
  position: absolute;
  //margin: -1rem -1rem;
  //font-size: 80px!important;
  //color: darkgreen!important;
  //transform: rotate(-45deg);
  //animation: jian 2.5s infinite;
  //margin: -0.1rem 0.3rem!important;
  //margin-top: 50px;
  //margin-left: 50%;
}
.header{
  clear: both;
  position: absolute;
  //left: 50px;
  //top: 380px;
  width: 370px;
  height: 300px;
  z-index: 2;
}

.title {
  position: relative;
  width: 370px;
  height: 300px;
}

.titleImg{
  clear: both;
  width: 750px;
  height: 1334px;
  left: 0px;
  top: 0px;
  position: fixed;
  //background: gainsboro;
  z-index: 3;
  & img{
    clear: both;
    position: absolute;
    left: 50px;
    top:220px;
    width: 652px;
    height: 792px;
  }
  & div{
    position: absolute;
    right: 125px;
    top: 270px;
    width: 50px;
    height: 50px;
    //background: rebeccapurple;
  }
  & span{
    position: absolute;
    top:750px;
    display: inline-block;
    left: 280px;
    width: 200px;
    height: 120px;
    //background: rebeccapurple;
  }
}

.titleWrapper{
  position: absolute;
  left: 0px;
  top:0;
  width: 750px;
  height: 13000px;
  //background: green;


}
